// src/viewpage/showrecipe.tsx
import React from 'react';
import { type RecipeListProps } from './types';
import bowlIcon from '../../src/assets/bowl.svg';

const defaultRecipeImage = '';

interface ExtendedRecipeListProps extends RecipeListProps {
  showCollectTab?: boolean;
}

const ShowRecipe: React.FC<ExtendedRecipeListProps> = ({
  recipes,
  currentTab,
  onRecipeClick,
  onTabChange,
  
}) => {
  const processRecipeImageUrl = (image: string | undefined): string => {
    if (!image) return defaultRecipeImage;
    if (image.startsWith('http')) return image;
    return image.startsWith('/')
      ? `http://218.244.141.86:8080${image}`
      : `http://218.244.141.86:8080/${image}`;
  };

  // 定义标签配置
  const tabConfig = [
    { key: '食谱' as const, icon: bowlIcon, label: '食谱' },
  ];

  return (
    <>
      <div style={{ 
        display: 'flex', 
        justifyContent: 'center',
        gap: '30px', 
        marginBottom: '40px'
      }}>
        {tabConfig.map((tab) => (
          <div
            key={tab.key}
            style={{
              display: 'flex',
              alignItems: 'center',
              gap: '12px',
              cursor: 'pointer',
              fontWeight: currentTab === tab.key ? 'bold' : '600',
              color: currentTab === tab.key ? '#8B4513' : '#8B7D6B',
              fontSize: '18px',
              padding: '12px 32px',
              borderRadius: '25px',
              background: currentTab === tab.key 
                ? 'linear-gradient(135deg, rgba(240,224,208,0.8) 0%, rgba(232,208,184,0.8) 100%)' 
                : 'rgba(255,255,255,0.6)',
              backdropFilter: 'blur(10px)',
              boxShadow: currentTab === tab.key 
                ? '0 8px 25px rgba(240,224,208,0.6)' 
                : '0 4px 15px rgba(0,0,0,0.1)'
            }}
            onClick={() => onTabChange(tab.key)}
          >
            <img 
              src={tab.icon} 
              alt={tab.label} 
              style={{ 
                width: '24px', 
                height: '24px',
                filter: currentTab === tab.key 
                  ? 'invert(25%) sepia(30%) saturate(800%) hue-rotate(350deg) brightness(80%) contrast(90%)'
                  : 'invert(50%) sepia(10%) saturate(400%) hue-rotate(350deg) brightness(90%) contrast(90%)'
              }} 
            />
            <span>{tab.label}</span>
          </div>
        ))}
      </div>

      <div style={{ 
        display: 'grid', 
        gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))',
        gap: '30px',
        maxWidth: '1200px',
        margin: '0 auto',
        padding: '0 20px'
      }}>
        {recipes.length > 0 ? (
          recipes.map((recipe) => (
            <div key={recipe.id} style={{ textAlign: 'center' }}>
              <div style={{
                borderRadius: '16px',
                overflow: 'hidden',
                boxShadow: '0 8px 25px rgba(0,0,0,0.15)',
                cursor: 'pointer'
              }}
              // 修复：传递完整的菜谱对象
              onClick={() => onRecipeClick(recipe)}
              >
                <img
                  src={processRecipeImageUrl(recipe.image)}
                  alt={recipe.title}
                  style={{
                    width: '100%',
                    height: '220px',
                    objectFit: 'cover'
                  }}
                  onError={(e) => {
                    const target = e.target as HTMLImageElement;
                    target.src = defaultRecipeImage;
                  }}
                />
              </div>
              <p style={{ 
                marginTop: '16px', 
                fontSize: '16px', 
                fontWeight: '600',
                color: '#8B4513'
              }}>
                {recipe.title}
              </p>
            </div>
          ))
        ) : (
          <div style={{ 
            textAlign: 'center', 
            width: '100%', 
            color: '#8B7D6B', 
            padding: '60px 0',
            gridColumn: '1 / -1'
          }}>
            <div style={{
              fontSize: '18px',
              padding: '30px',
              backgroundColor: 'rgba(255,255,255,0.6)',
              borderRadius: '20px',
              backdropFilter: 'blur(10px)'
            }}>
              暂无{currentTab === '食谱' ? '发布' : '收藏'}的菜谱
            </div>
          </div>
        )}
      </div>
    </>
  );
};

export default ShowRecipe;